<template>
  <div class="body">
    <div id="footerRight" class="echarts"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { color } from "echarts/lib/export";
export default {
  props: ["stateList"],
  data() {
    return {
      options: [
        {
          value: "1",
          label: "2024",
        },
        {
          value: "2",
          label: "2023",
        },
      ],
      value: "1",
    };
  },
  methods: {
    everyDay() {
      var chartDom = document.getElementById("footerRight");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "0",
          left: "center",
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "55%",
            style: {
              text: "一月",
              textAlign: "center",
              fontSize: 16,
              fill: "#666",
            },
          },
          {
            type: "text",
            left: "center",
            top: "middle",
            style: {
              text: "9010", // 请将实际的数值替换为您想要显示的数值
              textAlign: "center",
              fontSize: 24,
              fontWeight: "bold",
              fill: "#333",
            },
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
           
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },

            data: [
              { value: 1048, name: "杂物费用4", itemStyle: { color: "#5087EC" }  },
              { value: 735, name: "杂物费用3" , itemStyle: { color: "#68BBC4" } },
              { value: 580, name: "杂物费用2" , itemStyle: { color: "#58A55C" } },
              { value: 484, name: "杂物费用1" , itemStyle: { color: "#F2BD42" } },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.everyDay();
  },
};
</script>
<style lang="scss" scoped>
/* @media (min-width: 1925px) {
  .echarts {
    width: 100%;
    height: 90%;
  }
}
@media (min-width: 1280px) and (max-width: 1925px) {
  .echarts {
    width: 100%;
    height: 85%;
  }
}
@media (min-width: 768px) and (max-width: 1280px) {
  .echarts {
    width: 100%;
    height: 75%;
  }
} */
.body {
  height: 100%;
  background-color: white !important;
}
.echarts {
  width: 96%;
  height: 90%;
}
.select {
  width: 100px;
  height: 100px;
}
</style>
